<template>
  <div id="pie" style="width: 100%; height: 350px"></div>
</template>

<script setup lang="ts">
import {reactive, toRefs, ref, onMounted, watch} from 'vue'
import * as echarts from 'echarts'

const props = defineProps<{
  data: {}[]
}>();

let arr = ref<{ value: number, name: string }[]>([]);

watch(() => props.data, () => {
  arr.value = props.data.map(item => ({value: item.today_money, name: item.name}));
  // 初始化实例
  var chartDom = document.getElementById('pie');
  var myChart = echarts.init(chartDom as HTMLElement);

  var option;

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: arr.value
      }
    ]
  };

  option && myChart.setOption(option);
})


// 实例被挂载后调用
onMounted(() => {

})

</script>

<style lang="less" scoped>

</style>
